// NetFlow 网络流量管理系统 - 系统概览页面脚本

// 图表对象
let bandwidthChart;
let trafficChart;
let appChart;

// 模拟数据 - 实时流量数据
let trafficData = [];
let timestamps = [];

// 初始化所有图表
function initCharts() {
    // 初始化带宽分配图表
    bandwidthChart = echarts.init(document.getElementById('bandwidth_chart'));
    const bandwidthOption = {
        title: {
            text: '优先级带宽分配'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['最小保证带宽', '最大可用带宽']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
                formatter: '{value} %'
            }
        },
        yAxis: {
            type: 'category',
            data: ['实时交互类', '流媒体类', '普通数据类', '背景传输类']
        },
        series: [
            {
                name: '最小保证带宽',
                type: 'bar',
                data: [40, 30, 20, 10]
            },
            {
                name: '最大可用带宽',
                type: 'bar',
                data: [100, 80, 60, 40]
            }
        ]
    };
    bandwidthChart.setOption(bandwidthOption);
    
    // 初始化流量监控图表
    trafficChart = echarts.init(document.getElementById('traffic_chart'));
    const trafficOption = {
        title: {
            text: '实时带宽使用'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                let result = params[0].axisValue + '<br/>';
                params.forEach(function(param) {
                    result += param.seriesName + ': ' + 
                             (param.value / 1000000).toFixed(2) + ' Mbps<br/>';
                });
                return result;
            }
        },
        legend: {
            data: ['当前带宽']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function(value) {
                    return (value / 1000000).toFixed(2) + ' Mbps';
                }
            }
        },
        series: [
            {
                name: '当前带宽',
                type: 'line',
                data: []
            }
        ]
    };
    trafficChart.setOption(trafficOption);
    
    // 初始化应用流量图表
    appChart = echarts.init(document.getElementById('app_chart'));
    const appOption = {
        title: {
            text: '应用流量分布'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['视频会议', '语音通话', '在线游戏', '视频流媒体', '音频流媒体', 
                   '网页浏览', '文件下载', 'P2P下载', '其他']
        },
        series: [
            {
                name: '应用流量',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1250, name: '视频会议'},
                    {value: 850, name: '语音通话'},
                    {value: 750, name: '在线游戏'},
                    {value: 2500, name: '视频流媒体'},
                    {value: 1200, name: '音频流媒体'},
                    {value: 1800, name: '网页浏览'},
                    {value: 1500, name: '文件下载'},
                    {value: 950, name: 'P2P下载'},
                    {value: 650, name: '其他'}
                ]
            }
        ]
    };
    appChart.setOption(appOption);
}

// 更新实时流量图表
function updateTrafficChart() {
    const now = new Date();
    const timeStr = now.getHours() + ':' + 
                 (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) + ':' + 
                 (now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds());
    
    // 生成随机带宽数据 (40-80 Mbps)
    const randomBandwidth = Math.floor(40000000 + Math.random() * 40000000);
    
    timestamps.push(timeStr);
    trafficData.push(randomBandwidth);
    
    // 保持最多60个数据点（10分钟）
    if (timestamps.length > 60) {
        timestamps.shift();
        trafficData.shift();
    }
    
    trafficChart.setOption({
        xAxis: {
            data: timestamps
        },
        series: [
            {
                name: '当前带宽',
                data: trafficData
            }
        ]
    });
    
    // 更新当前带宽显示
    document.getElementById('current_bw').textContent = (randomBandwidth / 1000000).toFixed(2) + ' Mbps';
    
    // 更新负载因子 (40-80%)
    const loadFactor = (randomBandwidth / 100000000 * 100).toFixed(1);
    document.getElementById('load_factor').textContent = loadFactor + '%';
    
    // 更新拥塞指数 (5-20%)
    const congestionIndex = (5 + Math.random() * 15).toFixed(1);
    document.getElementById('congestion_index').textContent = congestionIndex + '%';
}

// 更新系统运行时间
function updateUptime() {
    // 模拟运行时间增加
    const uptimeText = document.getElementById('uptime').textContent;
    const match = uptimeText.match(/(\d+)天 (\d+)小时 (\d+)分钟/);
    
    if (match) {
        let days = parseInt(match[1]);
        let hours = parseInt(match[2]);
        let minutes = parseInt(match[3]);
        
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
            if (hours >= 24) {
                hours = 0;
                days++;
            }
        }
        
        document.getElementById('uptime').textContent = `${days}天 ${hours}小时 ${minutes}分钟`;
    }
}

// 页面加载完成后初始化
window.addEventListener('load', function() {
    // 初始化图表
    initCharts();
    
    // 立即更新一次流量图表
    updateTrafficChart();
    
    // 设置定时更新
    setInterval(updateTrafficChart, 2000);  // 每2秒更新流量图表
    setInterval(updateUptime, 60000);       // 每分钟更新运行时间
    
    // 窗口大小改变时重绘图表
    window.addEventListener('resize', function() {
        if (bandwidthChart) bandwidthChart.resize();
        if (trafficChart) trafficChart.resize();
        if (appChart) appChart.resize();
    });
});
